<template>
  <div class="page flex-col">
    <div class="group_1 flex-col">
      <div class="block_1 flex-col">
        <div class="group_2 flex-row">
          <img class="label_1" referrerpolicy="no-referrer"
            src="./assets/img/MasterDDSSlicePNG6ff5037b934608ddea08824d9a0e5398.png" />
          <span class="text_1">搜索</span>
          <span class="text_2">21℃</span>
          <span class="text_3">尚芬芬</span>
          <img class="thumbnail_1" referrerpolicy="no-referrer"
            src="./assets/img/MasterDDSSlicePNG4e6c60cf2dd3a5e9f47c740103e8fb3d.png" />
        </div>
        <div class="group_3 flex-row">
          <img class="image_1" referrerpolicy="no-referrer"
            src="./assets/img/MasterDDSSlicePNG012da36756ca8a49467a432b6d612131.png" />
          <div class="text-wrapper_1 flex-col justify-center align-center">
            <span class="text_4">XXXXXX资源信息平台</span>
          </div>
          <span class="text_6">首页</span>
          <span class="text_7">平台介绍</span>
          <span class="text_8">工作动态</span>
          <span class="text_9">应用中心</span>
          <span class="text_10">决策中心</span>
        </div>
        <div class="group_4 flex-row justify-between">
          <div class="block_2 flex-col">
            <div class="box_1 flex-row">
              <div class="image-text_1 flex-row justify-between">
                <span class="text-group_1">更多</span>
                <img class="thumbnail_2" referrerpolicy="no-referrer"
                  src="./assets/img/MasterDDSSlicePNG70eebb778c8306ad3d5f05118aa8f6ed.png" />
              </div>
              <div class="box_2 flex-row">
                <img class="label_2" referrerpolicy="no-referrer"
                  src="./assets/img/MasterDDSSlicePNG96ba6b03a975b55975637fad4c964f52.png" />
                <span class="text_11">常用数据应用</span>
                <div class="section_1 flex-col"></div>
              </div>
            </div>
          </div>
          <span class="paragraph_1">
            强国复兴有我
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;安国兴邦常在
          </span>
        </div>
      </div>
      <div class="block_3 flex-col">
        <div class="text-wrapper_2 flex-row">
          <span class="text_12">XXXX应用中心</span>
        </div>
        <div class="section_2 flex-row justify-between">
          <div class="text-group_2 flex-col justify-between">
            <span class="text_13">30+个</span>
            <span class="text_14">数据应用</span>
          </div>
          <div class="text-wrapper_3 flex-col justify-between">
            <span class="text_15">100+个</span>
            <span class="text_16">用户</span>
          </div>
        </div>
        <div class="section_3 flex-row">
          <div class="text-group_3 flex-col justify-between">
            <span class="text_17">5万+次</span>
            <span class="text_18">日访问</span>
          </div>
        </div>
      </div>
      <div class="block_4 flex-col">
        <span class="text_19">XXXX可视化分析平台</span>
        <div class="group_5 flex-row justify-between">
          <div class="text-group_4 flex-col justify-between">
            <span class="text_20">10个</span>
            <span class="text_21">应用场景</span>
          </div>
          <div class="text-group_5 flex-col justify-between">
            <span class="text_22">20个</span>
            <span class="text_23">分析模型</span>
          </div>
        </div>
        <div class="group_6 flex-row">
          <div class="text-group_6 flex-col justify-between">
            <span class="text_24">200张</span>
            <span class="text_25">统计报表</span>
          </div>
        </div>
      </div>
    </div>
    <div class="group_7 flex-col">
      <div class="block_38 flex-col">
        <div class="section_23 flex-row">
          <div class="section_index flex-col" v-for="(item, index) in 16" :key="index">
            <img class="image_110" :src="'/assets/img/diagram' + (48 + index) + '3.png'" />
            <span class="text_110">XXX应用</span>
          </div>
        </div>
      </div>
      <div class="block_5 flex-row justify-between">
        <div class="box_3 flex-col justify-between">
          <div class="block_6 flex-col">
            <img class="thumbnail_3" referrerpolicy="no-referrer"
              src="./assets/img/MasterDDSSlicePNG46385a935cb246ae36773ffa6b989e30.png" />
            <div class="block_7 flex-row">
              <div class="block_8 flex-row">
                <img class="thumbnail_4" referrerpolicy="no-referrer"
                  src="./assets/img/MasterDDSSlicePNG6b0865ee25369c0d8f94302f236ae99a.png" />
                <img class="thumbnail_5" referrerpolicy="no-referrer"
                  src="./assets/img/MasterDDSSlicePNG5a837bdb47fd7f0acc95775ccf23b652.png" />
                <img class="thumbnail_6" referrerpolicy="no-referrer"
                  src="./assets/img/MasterDDSSlicePNG6b0865ee25369c0d8f94302f236ae99a.png" />
                <div class="group_8 flex-col"></div>
              </div>
              <span class="text_26">数据接入动态</span>
            </div>
          </div>
          <div class="block_flex">
            <div class="block_index flex-col" v-for="(item, index) in blockArr1" :key="index">
              <div class="text-wrapper_4 flex-col" :style="{ 'background-color': item.color1 }">
                <span class="text_27">{{ item.title }}</span>
              </div>
              <div class="box_4 flex-row justify-between">
                <div class="text-group_7 flex-col justify-between">
                  <span class="text_28">{{ item.number }}</span>
                  <span class="text_29">今日&nbsp;+{{ item.count }}</span>
                </div>
                <div class="box_5 flex-col">
                  <div :id="'childContainer' + index" :ref="'childContainer' + index" style="width: 100%; height: 96px">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="block_flex">
            <div class="block_index flex-col" v-for="(item, index) in blockArr2" :key="index">
              <div class="text-wrapper_5 flex-col" :style="{ 'background-color': item.color1 }">
                <span class="text_30">{{ item.title }}</span>
              </div>
              <div class="group_10 flex-row">
                <div class="box_6 flex-col justify-between">
                  <div class="text-wrapper_6 flex-row">
                    <span class="text_31">{{ item.number }}</span>
                    <span class="text_32">结构化：</span>
                  </div>
                  <span class="text_33">今日&nbsp;+{{ item.count }}</span>
                </div>
                <div class="box_7 flex-col">
                  <div :id="'childContainer' + (index + 3)" :ref="'childContainer' + (index + 3)"
                    style="width: 100%; height: 96px"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box_8 flex-col">
          <div class="group_12 flex-row justify-between">
            <div class="image-text_2 flex-row justify-between">
              <span class="text-group_8">数据来源</span>
              <div class="box_9 flex-col">
                <span class="text_35">排行</span>
                <div class="block_11 flex-col"></div>
              </div>
            </div>
            <div class="image-text_3 flex-row justify-between">
              <span class="text-group_9">更多</span>
              <div class="section_4 flex-col"></div>
            </div>
          </div>
          <div class="group_13 flex-col">
            <div class="group_14 flex-row">
              <div class="block_12 flex-col"></div>
              <div class="block_13 flex-col"></div>
              <div class="block_14 flex-col"></div>
              <span class="text_36">XXXXX管理信息系统</span>
              <img class="thumbnail_7" referrerpolicy="no-referrer"
                src="./assets/img/MasterDDSSlicePNG385e7b5973fabda4d21f95582ed0ac44.png" />
              <span class="text_37">1</span>
            </div>
            <div class="group_15 flex-row">
              <div class="block_15 flex-col"><img src="./assets/img/banner.png" /></div>
              <div class="block_16 flex-col"></div>
              <span class="text_38">94543123</span>
              <span class="text_39">条</span>
            </div>
            <div class="group_16 flex-col"></div>
            <div class="text-wrapper_7 flex-col">
              <span class="text_40">1</span>
            </div>
          </div>
          <div class="group_17 flex-col">
            <div class="section_5 flex-row">
              <div class="box_10 flex-col"></div>
              <div class="box_11 flex-col"></div>
              <div class="box_12 flex-col"></div>
              <span class="text_41">XXXXX应用系统</span>
              <img class="thumbnail_8" referrerpolicy="no-referrer"
                src="./assets/img/MasterDDSSlicePNG385e7b5973fabda4d21f95582ed0ac44.png" />
              <span class="text_42">2</span>
            </div>
            <div class="section_6 flex-row">
              <div class="group_18 flex-col"><img src="./assets/img/banner.png" /></div>
              <div class="group_19 flex-col"></div>
              <span class="text_43">89234583</span>
              <span class="text_44">条</span>
            </div>
            <div class="section_7 flex-col"></div>
            <div class="text-wrapper_8 flex-col">
              <span class="text_45">2</span>
            </div>
          </div>
          <div class="group_20 flex-col">
            <div class="group_21 flex-row">
              <div class="block_17 flex-col"></div>
              <div class="block_18 flex-col"></div>
              <div class="block_19 flex-col"></div>
              <span class="text_46">XXXXXXX大平台</span>
              <img class="thumbnail_9" referrerpolicy="no-referrer"
                src="./assets/img/MasterDDSSlicePNGa0bbc53e49405ef42f928c0d33884db8.png" />
              <span class="text_47">1</span>
            </div>
            <div class="group_22 flex-row">
              <div class="group_23 flex-col"><img src="./assets/img/banner.png" /></div>
              <div class="group_24 flex-col"></div>
              <span class="text_48">66612678</span>
              <span class="text_49">条</span>
            </div>
            <div class="group_25 flex-col"></div>
            <div class="text-wrapper_9 flex-col">
              <span class="text_50">3</span>
            </div>
          </div>
        </div>
      </div>
      <div class="block_20 flex-row justify-between">
        <div class="box_13 flex-col">
          <div class="box_14 flex-col">
            <img class="thumbnail_10" referrerpolicy="no-referrer"
              src="./assets/img/MasterDDSSlicePNG46385a935cb246ae36773ffa6b989e30.png" />
            <div class="box_15 flex-row">
              <div class="group_26 flex-col">
                <img class="letterlogo" src="./assets/img/diagram693.png" />
              </div>
              <span class="text_51">应用数据概况</span>
            </div>
          </div>
          <div class="box_17 flex-row justify-between">
            <div class="section_box flex-col" v-for="(item, index) in blockArr17" :key="index">
              <div class="text-wrapper_10 flex-row">
                <span class="text_52">{{ item.title }}</span>
              </div>
              <div class="text-wrapper_11 flex-row justify-between">
                <span class="text_53">{{ item.number }}</span>
                <span class="text_54">今日&nbsp;+{{ item.count }}</span>
              </div>
            </div>
          </div>
          <div class="box_18 flex-col">
            <div ref="chartContainer" style="width: 100%; height: 12vw"></div>
          </div>
        </div>
        <div class="box_22 flex-col">
          <div class="group_34 flex-row justify-between">
            <div class="box_23 flex-col">
              <div class="group_35 flex-col"></div>
            </div>
            <div class="image-text_4 flex-row justify-between">
              <span class="text-group_10">更多</span>
              <div class="group_36 flex-col"></div>
            </div>
          </div>
          <div class="group_37 flex-col">
            <div class="box_24 flex-row">
              <div class="block_21 flex-col"></div>
              <div class="block_22 flex-col"></div>
              <div class="block_23 flex-col"></div>
              <span class="text_75">XXXXXX</span>
            </div>
            <div class="box_25 flex-row">
              <div class="group_38 flex-col"><img src="./assets/img/banner.png" /></div>
              <div class="group_39 flex-col"></div>
              <span class="text_76">21277</span>
              <span class="text_77">次</span>
            </div>
            <div class="box_26 flex-col"></div>
            <div class="text-wrapper_21 flex-col">
              <span class="text_78">1</span>
            </div>
            <div class="box_27 flex-col"></div>
          </div>
          <div class="group_40 flex-col">
            <div class="section_13 flex-row">
              <div class="box_28 flex-col"></div>
              <div class="box_29 flex-col"></div>
              <div class="box_30 flex-col"></div>
              <span class="text_79">XXXXXXX</span>
            </div>
            <div class="section_14 flex-row">
              <div class="box_31 flex-col"><img src="./assets/img/banner.png" /></div>
              <div class="box_32 flex-col"></div>
              <span class="text_80">12357</span>
              <span class="text_81">次</span>
            </div>
            <div class="section_15 flex-col"></div>
            <div class="text-wrapper_22 flex-col">
              <span class="text_82">2</span>
            </div>
            <div class="section_16 flex-col"></div>
          </div>
          <div class="group_41 flex-col">
            <div class="block_24 flex-row">
              <div class="section_17 flex-col"></div>
              <div class="section_18 flex-col"></div>
              <div class="section_19 flex-col"></div>
              <span class="text_83">XXXXXXXXX</span>
              <img class="thumbnail_14" referrerpolicy="no-referrer"
                src="./assets/img/MasterDDSSlicePNG1fc139f1e089d2251ae4c11f3e6b3c72.png" />
              <span class="text_84">1</span>
            </div>
            <div class="block_25 flex-row">
              <div class="block_26 flex-col"><img src="./assets/img/banner.png" /></div>
              <div class="block_27 flex-col"></div>
              <span class="text_85">5437</span>
              <span class="text_86">次</span>
            </div>
            <div class="block_28 flex-col"></div>
            <div class="text-wrapper_23 flex-col">
              <span class="text_87">3</span>
            </div>
            <div class="block_29 flex-col"></div>
          </div>
          <div class="text-wrapper_24 flex-row">
            <span class="text_88">数据应用</span>
            <span class="text_89">排行</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chart: null,
      constants: {},
      blockArr1: [
        {
          title: "建成数据库总量（个）",
          number: "85",
          count: "1",
          color: "#2C8BFF",
          color1: "#E5F2FF",
        },
        {
          title: "接入数据库表总量（张）",
          number: "37,091",
          count: "1",
          color: "#FF6C6C",
          color1: "#FDE9E8",
        },
        {
          title: "数据记录总条数（条）",
          number: "22亿",
          count: "1",
          color: "#6157FF",
          color1: "#EBEAFC",
        },
      ],
      blockArr2: [
        {
          title: "形成主题数据集（个）",
          number: "345",
          count: "8",
          color: "#90E3BF",
          color1: "#E0F7ED",
        },
        {
          title: "大数据平台对接总量",
          number: "148.5GB",
          count: "24GB",
          color: "#FFCE6C",
          color1: "#FDF8E4",
        },
        {
          title: "数据记录总条数（条）",
          number: "14.5TB",
          count: "0.2TB",
          color: "#FFE063",
          color1: "#FEF9E6",
        },
      ],
      blockArr17: [
        {
          title: "数据总量（条）",
          number: "234656",
          count: "591",
        },
        {
          title: "已发布应用库表（类）",
          number: "48",
          count: "2",
        },
        {
          title: "已发布应用文件（类）",
          number: "4",
          count: "1",
        },
        {
          title: "已发布应用接口（个）",
          number: "19",
          count: "2",
        },
      ],
      optionData: {
        title: {
          textStyle: {
            color: "#3D3D3D", // 这里设置标题颜色为红色
          },
          left: "20px", // 距离顶部10%
          top: "4px", // 距离顶部10%
          text: "应用数据近半年增长情况", // 主标题文本
        },
        grid: {
          top: "20%", // 距离顶部10%
          bottom: "15%", // 距离底部15%
          left: "2%", // 距离左侧10%
          right: "2%", // 距离右侧10%
          containLabel: true, // 包含坐标轴标签
        },
        xAxis: {
          type: "category",
          data: [
            "2021-12",
            "2022-01",
            "2022-02",
            "2022-03",
            "2022-04",
            "2022-05",
            "2022-06",
          ],
        },
        yAxis: {
          type: "value",
          splitNumber: 3, // 设置y轴的分割段数
          min: 800, // 比最小值小 20
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
          },
        ],
      },
      optionsData: {
        grid: {
          top: "10%", // 距离顶部10%
          bottom: "20%", // 距离底部15%
          left: "10%", // 距离左侧10%
          right: "1%", // 距离右侧10%
          containLabel: true, // 包含坐标轴标签
        },
        xAxis: {
          show: false,
          type: "category",
          data: [
            "2021-12",
            "2022-01",
            "2022-02",
            "2022-03",
            "2022-04",
            "2022-05",
            "2022-06",
          ],
          axisTick: {
            //控制刻度线显示
            show: false,
          },
          axisLabel: {
            //控制文字显示
            show: false,
          },
          splitLine: {
            // 分隔线
            show: false, // 不显示分隔线
          },
        },
        yAxis: {
          axisTick: {
            //控制刻度线显示
            show: false,
          },
          axisLabel: {
            //控制文字显示
            show: false,
          },
          splitLine: {
            // 分隔线
            show: false, // 不显示分隔线
          },
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            symbol: "none",
            smooth: true,
            lineStyle: {
              normal: {
                type: "solid",
                opacity: "0.5",
              },
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(128, 255, 165)",
                },
                {
                  offset: 1,
                  color: "rgb(1, 191, 236)",
                },
              ]),
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer);
      this.chart.setOption(this.optionData);
      console.log("chart==>>", this.chart);
      // let chart0 = echarts.init(this.$refs.childContainer0);
      // let chart1 = echarts.init(this.$refs.childContainer1);
      // let chart2 = echarts.init(this.$refs.childContainer2);
      // let chart3 = echarts.init(this.$refs.childContainer3);
      // let chart4 = echarts.init(this.$refs.childContainer4);
      // let chart5 = echarts.init(this.$refs.childContainer5);
      // console.log('chart0==>>',chart0);
      for (let i = 0; i < this.blockArr1.length; i++) {
        let chartss = document.getElementById("childContainer" + i);
        let echartt = echarts.init(chartss);
        let item = this.blockArr1[i];
        this.optionsData.series[0].lineStyle.normal.color = item.color;
        this.optionsData.series[0].areaStyle.color =
          new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: item.color,
            },
            {
              offset: 1,
              color: item.color1,
            },
          ]);
        echartt.setOption(this.optionsData);
      }
      for (let i = 0; i < this.blockArr2.length; i++) {
        let chartss = document.getElementById("childContainer" + (i + 3));
        let echartt = echarts.init(chartss);
        let item = this.blockArr2[i];
        this.optionsData.series[0].lineStyle.normal.color = item.color;
        this.optionsData.series[0].areaStyle.color =
          new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: item.color,
            },
            {
              offset: 1,
              color: item.color1,
            },
          ]);
        echartt.setOption(this.optionsData);
      }
      // chart1.setOption(this.optionData);
      // chart2.setOption(this.optionData);
      // chart3.setOption(this.optionData);
      // chart4.setOption(this.optionData);
      // chart5.setOption(this.optionData);
    },
  },
};
</script>
<style scoped lang="css" src="./assets/index.response.css" />